<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户详情 - 考试座位管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f0f4f8;
        }
        .user-detail-container {
            max-width: 800px;
            margin: 30px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        .user-header {
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 20px;
            padding-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .user-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: #6c757d;
            margin: 0 auto 20px;
        }
        .user-info-card {
            margin-bottom: 20px;
        }
        .user-info-card .card-header {
            font-weight: 600;
        }
        .badge-role {
            font-size: 0.85em;
            padding: 5px 8px;
        }
        .badge-status {
            font-size: 0.85em;
            padding: 5px 8px;
        }
        .alert {
            margin-bottom: 20px;
        }
        .info-label {
            font-weight: 500;
            color: #6c757d;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="/dashboard">考试座位管理系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/dashboard">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin">座位编排</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/exam">考试信息</a>
                    </li>
                    <li class="nav-item" sec:authorize="hasRole('ADMIN')">
                        <a class="nav-link active" href="/admin/users">用户管理</a>
                    </li>
                    <li class="nav-item" sec:authorize="hasRole('ADMIN')">
                        <a class="nav-link" href="/admin/settings">系统设置</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle"></i> <span sec:authentication="name">用户名</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="/users/profile"><i class="bi bi-person"></i> 个人资料</a></li>
                            <li><a class="dropdown-item" href="/users/change-password"><i class="bi bi-key"></i> 修改密码</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/auth/logout"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="user-detail-container">
        <!-- 消息提示 -->
        <div th:if="${success}" class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i> <span th:text="${success}">操作成功</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i> <span th:text="${error}">操作失败</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        <!-- 用户详情标题 -->
        <div class="user-header">
            <div>
                <h2><i class="bi bi-person-fill me-2"></i>用户详情</h2>
                <p class="text-muted">查看和编辑用户信息</p>
            </div>
            <div>
                <a href="/admin/users" class="btn btn-outline-primary"><i class="bi bi-arrow-left me-1"></i>返回用户列表</a>
            </div>
        </div>

        <!-- 用户头像 -->
        <div class="user-avatar">
            <i class="bi bi-person"></i>
        </div>

        <!-- 用户基本信息 -->
        <div class="card user-info-card">
            <div class="card-header bg-light">
                <i class="bi bi-info-circle me-2"></i>基本信息
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <p class="info-label">用户ID</p>
                        <p th:text="${user.id}">1</p>
                    </div>
                    <div class="col-md-6">
                        <p class="info-label">用户名</p>
                        <p th:text="${user.username}">admin</p>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <p class="info-label">姓名</p>
                        <p th:text="${user.fullName}">管理员</p>
                    </div>
                    <div class="col-md-6">
                        <p class="info-label">邮箱</p>
                        <p th:text="${user.email}">admin@example.com</p>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <p class="info-label">角色</p>
                        <p>
                            <span th:if="${user.role == 'ADMIN'}" class="badge bg-danger badge-role">管理员</span>
                            <span th:if="${user.role == 'USER'}" class="badge bg-primary badge-role">普通用户</span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p class="info-label">状态</p>
                        <p>
                            <span th:if="${user.active}" class="badge bg-success badge-status">已启用</span>
                            <span th:unless="${user.active}" class="badge bg-secondary badge-status">已禁用</span>
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <p class="info-label">注册时间</p>
                        <p th:text="${user.createdAt != null ? #temporals.format(user.createdAt, 'yyyy-MM-dd HH:mm:ss') : '未知'}">2023-01-01 12:00:00</p>
                    </div>
                    <div class="col-md-6">
                        <p class="info-label">最后登录</p>
                        <p th:text="${user.lastLogin != null ? #temporals.format(user.lastLogin, 'yyyy-MM-dd HH:mm:ss') : '从未登录'}">2023-01-01 12:00:00</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑用户信息 -->
        <div class="card user-info-card">
            <div class="card-header bg-light">
                <i class="bi bi-pencil-square me-2"></i>编辑用户信息
            </div>
            <div class="card-body">
                <form th:action="@{/admin/users/{id}/update(id=${user.id})}" method="post" class="needs-validation" novalidate>
                    <div class="mb-3">
                        <label for="fullName" class="form-label">姓名</label>
                        <input type="text" class="form-control" id="fullName" name="fullName" th:value="${user.fullName}" required>
                        <div class="invalid-feedback">请输入姓名</div>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="email" name="email" th:value="${user.email}" required>
                        <div class="invalid-feedback">请输入有效的邮箱地址</div>
                    </div>
                    <div class="mb-3" th:unless="${#authentication.name == user.username}">
                        <label for="role" class="form-label">角色</label>
                        <select class="form-select" id="role" name="role" required>
                            <option value="USER" th:selected="${user.role == 'USER'}">普通用户</option>
                            <option value="ADMIN" th:selected="${user.role == 'ADMIN'}">管理员</option>
                        </select>
                    </div>
                    <div class="mb-3" th:unless="${#authentication.name == user.username}">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="active" name="active" th:checked="${user.active}">
                            <label class="form-check-label" for="active">启用账号</label>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between">
                        <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i>保存更改</button>
                        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#resetPasswordModal" th:unless="${#authentication.name == user.username}">
                            <i class="bi bi-key me-1"></i>重置密码
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 重置密码模态框 -->
        <div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="resetPasswordModalLabel">重置用户密码</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>确定要重置用户 <strong th:text="${user.username}">username</strong> 的密码吗？</p>
                        <p>重置后的密码将发送到用户邮箱。</p>
                        <form th:action="@{/admin/users/{id}/reset-password(id=${user.id})}" method="post" id="resetPasswordForm">
                            <!-- 表单内容 -->
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" form="resetPasswordForm" class="btn btn-warning">确认重置</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 表单验证
        (function () {
            'use strict'
            var forms = document.querySelectorAll('.needs-validation')
            Array.prototype.slice.call(forms).forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
        })()
    </script>
</body>
</html>